<script setup>
import { reactive, ref } from 'vue'
import { selectAllDep } from '@/api/department'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, ZoomIn, Plus, Download, Management } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { registerAccount } from '@/api/department'
import { selectInter } from '@/api/interview.js'
import * as echarts from "echarts"
import { selectStatus } from '@/api/interview'
import { useUserStore } from '@/stores/user'

import { selectPoInfo } from '@/api/department'

const dialogFormVisible = ref(false)
const formLabelWidth = ref('140px')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false);
const userStore = useUserStore()
onMounted(() => {
  optionIn()
  dianji()
  //插图  
  load()
  optionIn2()

});

const load = () => {
  const myChart = echarts.init(document.getElementById("wjc"));
  myChart.setOption({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: 'center',
      left: 'center',

    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'

          }
        },
        data: [
          { value: 0, name: '' },
          { value: 0, name: '' },
          { value: 0, name: '' },
        ]
      }
    ]
  });

  //更新插图
  const selectSt = async () => {
    const res = await selectStatus()
    console.log(res);

    if (res) {
      updateChart(res.data.data)
    }
  }
  selectSt()

  const updateChart = (data) => {
    const newData = data.map(item => ({
      value: item.quantity,
      name: item.status
    }));
    myChart.setOption({
      series: [
        {
          data: newData
        }
      ]
    });
  };

  myChart.on('mouseover', () => {
    myChart.setOption({
      legend: {
        show: false
      }
    });
  });

  myChart.on('mouseout', () => {
    myChart.setOption({
      legend: {
        show: true
      }
    });
  });


}










const form = reactive({
  name: '',
  password: '',
  phone: '',
  email: '',

})

const formRef = ref()

//表单校验
const rules = ref({
  name: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 5, message: '姓名长度为2-4', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '请输入中文', trigger: 'blur' }, // 中文验证规则
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度为6到12', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请正确输入电话号码', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '请输入性别', trigger: 'blur' },
  ],
});

//上传
const handlePictureCardPreview = (file) => {
  console.log(file);

};


//下载
const handleDownload = (file) => {
  // console.log(file.response.data);
  // dialogImageUrl.value = file.response.data;
  dialogVisible.value = true;
};

//清空路径
const clearFiles = (file) => {
  file.url = null;
};  



//关闭提交
const submitForm = async () => {
  // hhh()
  console.log( dialogImageUrl.value);
  
  const res = await registerAccount({
    name: form.name,
    password: form.password,
    phone: form.phone,
    email: form.email,
    imgUrl: dialogImageUrl.value,
    departmentId: bumen.selectedId,
    createBy: userStore.user.name,
    positionId: zhiwei1.selectedId,
    sex:form.sex
    // createDate: format
  })
  if (res.data.code == "200") {
    ElMessage({
      type: 'success',
      message: '添加成功',
    })
    dialogFormVisible.value = false;
    form.name = '';
    form.password = '';
    form.phone = '';
    form.email = '';
    bumen.selectedId = null
    zhiwei1.selectedId =null 
    fileList.value = [];
  } else {
    ElMessage({
      type: 'fail',
      message: '添加失败',
    })
  }
};

//取消按钮
const quxiaoFrom = () => {
  ElMessage.warning("取消成功")
  dialogFormVisible.value = false
  form.name = ''
  form.password = ''
  form.phone = ''
  form.email = ''
  bumen.selectedId = null
  zhiwei1.selectedId =null 
  fileList.value = [];
  formRef.value.resetFields()
}

//关闭按钮相关
const handleClose = () => {
  formRef.value.resetFields()
}

const optionInfo = ref()
const bumen = reactive({
  selectedId: null, // 部门id
})
//查询部门
const optionIn = async () => {
  try {
    const res = await selectAllDep();
    if (res && res.data) {
      // console.log(res.data);
      optionInfo.value = res.data.data

    } else {
      console.log("No data received");
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

const zhiwei1 = reactive({
  selectedId: null  //职位id
})


//改之后的职责
const optionInfo4 = ref()


//查询职位
const optionIn2 = async () => {
  try {
    const res = await selectPoInfo();
    if (res && res.data) {
      console.log(res.data);
      optionInfo4.value = res.data.data
    } else {
      console.log("No data received");
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}



const tableData = ref([

])

const dianji = async () => {
  const res = await selectInter({
    interviewStatus: tableData.stuts
  })
  if (res && res.data) {
    tableData.value = res.data.data
  }
}

const hit = (val) => {

  tableData.stuts = val
  console.log(tableData.stuts);
  dianji();
}

const open1 = ()=>{

  dialogFormVisible.value=true
}
const hhh = (response) => {
    if (response && typeof response === 'object') {
        if (response.code === '200') {
            console.log('上传成功，文件路径:', response.data);
            dialogImageUrl.value =  response.data;
        } else {
            console.error('上传失败，错误信息:', response.msg);
        }
    } else {
        console.error('response 格式不正确:', response);
    }
};




const fileList = ref([]);
</script>
<template>
  <el-card style="margin-bottom: 10px;">
    
    <el-button type="primary" @click="open1()">人员入职</el-button>

    

    <el-dialog v-model="dialogFormVisible" @close="handleClose" title="人员添加" width="600">
      <el-form :model="form" :rules="rules" ref="formRef" style="width: 300px; margin-left:150;">
        <el-form-item label="姓名:" prop="name" style="margin-left: 20px;">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码:" prop="password" style="margin-left: 20px;">
          <el-input v-model="form.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号:" prop="phone" style="margin-left: 5px;">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮件:" prop="email" style="margin-left: 20px;">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别:" prop="sex" style="margin-left: 20px;">
          <el-radio-group v-model="form.sex">
            <el-radio border :label="1">男</el-radio>
            <el-radio border :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门:" prop="bumen.selectedId" style="margin-left: 30px;">
          <el-select v-model="bumen.selectedId" placeholder="请选择" style="width: 115px; ">
            <el-option v-for="option in optionInfo" :key="option.value" :label="option.departmentName"
              :value="option.departmentId" />
          </el-select>
        </el-form-item>

        <el-form-item label="职位:" prop="zhiwe1.selectedId" style="margin-left: 30px;">
          <el-select v-model="zhiwei1.selectedId" placeholder="请选择" style="width: 100px; margin-top: 10px;">
        <el-option v-for="option in optionInfo4" :key="option.value" :label="option.positionName" :value="option.id" />
      </el-select>
        </el-form-item>


        <el-form-item label="上传:" style="margin-left: 30px;">
          <el-upload action="http://localhost:8888/upload-img" list-type="picture-card" :auto-upload="true" 
          :on-success="hhh"
          :file-list="fileList"
          >
            <el-icon>
              <Plus />
            </el-icon>

            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <el-icon>
                      <ZoomIn />
                    </el-icon>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <el-icon>
                      <Download />
                    </el-icon>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="clearFiles(file)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="quxiaoFrom">取消</el-button>
          <el-button type="primary" @click="submitForm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
  <div style="font-weight: bold; padding:10px;">面试人员信息</div>
  <div>

  </div>
  <el-row>
    <el-col :span="15">
      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane>
          <template #label>
            <el-icon>
              <Management />
            </el-icon>
            <span class="custom-tabs-label">
              <span @click="hit()">状态</span>
            </span>
          </template>
          <el-table :data="tableData" style="width: 100%; padding-top: 20px;" height="500">
            <el-table-column prop="interviewName" label="姓名"  />
            <el-table-column prop="interviewAge" label="年龄"  />
            <el-table-column prop="interviewSchool" label="学历"  />
            <el-table-column prop="departmentName" label="应聘岗位"  />
            <el-table-column prop="interviewSex" label="性别" >
            <template #default="scope">
                  {{scope.row.interviewSex == 1 ? "男":"女"}}
              </template>
            </el-table-column>  
            <el-table-column prop="interviewStatus" label="应聘状态">
              <template #default="scope">
                <el-button :style="{
                  backgroundColor: scope.row.interviewStatus === 1 ? '#409EFF'
                    : scope.row.interviewStatus === 0 ? '#67C23A'
                      : scope.row.interviewStatus === 2 ? '#FFA500'
                        : '#FFFFFF',  // 默认颜色
                  color: 'white'
                }">
                  {{ scope.row.interviewStatus === 1 ? '待审核' : scope.row.interviewStatus === 0 ? '待面试' :
                    scope.row.interviewStatus === 2 ? '已审核' : '未知状态' }}
                </el-button>
              </template>
            </el-table-column>


          </el-table>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span @click="hit(0)">
              面试
            </span>
          </template>
          <el-table :data="tableData" style="width: 100%; padding-top: 20px;">
            <el-table-column prop="interviewName" label="姓名" />
            <el-table-column prop="interviewAge" label="年龄"  />
            <el-table-column prop="interviewSchool" label="学历"  />
            <el-table-column prop="departmentName" label="应聘岗位" />
            <el-table-column prop="interviewStatus" label="应聘状态" >
              <template #default="scope">
                <el-button :style="{
                  backgroundColor: scope.row.interviewStatus === 1 ? '#409EFF'
                    : scope.row.interviewStatus === 0 ? '#67C23A'
                      : scope.row.interviewStatus === 2 ? '#FFA500'
                        : '#FFFFFF',  // 默认颜色
                  color: 'white'
                }">
                  {{ scope.row.interviewStatus === 1 ? '待审核' : scope.row.interviewStatus === 0 ? '待面试' :
                    scope.row.interviewStatus === 2 ? '已审核' : '未知状态' }}
                </el-button>
              </template>
            </el-table-column>


          </el-table>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span @click="hit(1)">
              待审核
            </span>
          </template>
          <el-table :data="tableData" style="width: 100%; padding-top: 20px;">
            <el-table-column prop="interviewName" label="姓名" />
            <el-table-column prop="interviewAge" label="年龄"/>
            <el-table-column prop="interviewSchool" label="学历" />
            <el-table-column prop="departmentName" label="应聘岗位"  />
            <el-table-column prop="interviewStatus" label="应聘状态">
              <template #default="scope">
                <el-button :style="{
                  backgroundColor: scope.row.interviewStatus === 1 ? '#409EFF'
                    : scope.row.interviewStatus === 0 ? '#67C23A'
                      : scope.row.interviewStatus === 2 ? '#FFA500'
                        : '#FFFFFF',  // 默认颜色
                  color: 'white'
                }">
                  {{ scope.row.interviewStatus === 1 ? '待审核' : scope.row.interviewStatus === 0 ? '待面试' :
                    scope.row.interviewStatus === 2 ? '已审核' : '未知状态' }}
                </el-button>
              </template>
            </el-table-column>


          </el-table>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span @click="hit(2)">
              已审核
            </span>
          </template>
          <el-table :data="tableData" style="width: 100%; padding-top: 20px;">
            <el-table-column prop="interviewName" label="姓名"  />
            <el-table-column prop="interviewAge" label="年龄"  />
            <el-table-column prop="interviewSchool" label="学历" />
            <el-table-column prop="departmentName" label="应聘岗位"  />
            <el-table-column prop="interviewStatus" label="应聘状态">
              <template #default="scope">
                <el-button :style="{
                  backgroundColor: scope.row.interviewStatus === 1 ? '#409EFF'
                    : scope.row.interviewStatus === 0 ? '#67C23A'
                      : scope.row.interviewStatus === 2 ? '#FFA500'
                        : '#FFFFFF',  // 默认颜色
                  color: 'white'
                }">
                  {{ scope.row.interviewStatus === 1 ? '待审核' : scope.row.interviewStatus === 0 ? '待面试' :
                    scope.row.interviewStatus === 2 ? '已审核' : '未知状态' }}
                </el-button>
              </template>
            </el-table-column>


          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="9">
      <div id="wjc" style="width: 600px; height: 500px; margin: auto;"></div>
    </el-col>
  </el-row>




</template>

<style ecoped>
.el-dialog__title {
  color: gray;
  /* 示例：将标题文字颜色设为蓝色 */
  font-weight: bold;
  /* 示例：让标题字体加粗 */
}
</style>